<template>
	<view class="container">
		<no-data :showErrorTip="showNoData"></no-data>
		<view class="containerin" v-if="showNoData == false">
			<view class="list" v-for="(item, index) in practiceList.list" :key="index">
				<view v-if="types!=3">
					<view class="list__title">{{item.name}}</view>
					<button v-if="item.overdue==0&&item.resultId==undefined" class="list__btn-four" @click="startExam(index, item.paperId,item.id,item.taskUserJoinId)">开始练习</button>
					<button v-if="item.overdue==1&&item.resultId==undefined" class="list__btn-four gray-btn">已结束</button>
					<button v-if="item.resultId!=undefined" class="list__btn-three" @click="analysis(item.examId,item.resultId)">查看解析</button>
				</view>
				<view v-if="types==3" @click="linkTo(index,item.learnId,item.learnType)">
					<view class="list__title">{{item.name}}</view>
					<text v-if="item.learnStatus=='0'" class="list__btn-four">开始学习</text>
					<text v-if="item.learnStatus=='1'" class="list__btn-three">已学习</text>
				</view>
			</view>
		</view>
		<view class="loading" v-if="textShow">没有更多了</view>
	</view>
</template>

<script>
	import {
		isEmpty
	} from '@/utils/index';
	import baseService from "@/services/study/index.js";
	const service = new baseService();
	import ExamService from "@/services/exam/exam.js";
	const examService = new ExamService();

	export default {
		data() {
			return {
				examType: 7,
				types: 0,
				practiceList: {
					list: []
				},
				page: 0,
				pages: 0,
				textShow: false,
				curIndex: -1,
				showNoData: false
			};
		},
		onUnload() {
			uni.$off('examFinish');
			uni.$off('studyFinished');
		},

		onLoad(query) {
			uni.$on('examFinish', (payload) => {
				if (this.curIndex < 0 || isEmpty(this.practiceList.list) || this.practiceList.list.length <= this.curIndex) {
					return;
				}
				this.practiceList.list[this.curIndex].resultId = payload.recordId;
			});
			uni.$on('studyFinished',(payload)=>{
				if (this.curIndex < 0 || isEmpty(this.practiceList.list) || this.practiceList.list.length <= this.curIndex) {
					return;
				}
				this.practiceList.list[this.curIndex].learnStatus = '1';
			})
			this.types = query.type;
			if (query.type == 1) {
				uni.setNavigationBarTitle({
					title: "每周一测"
				});
			} else if (query.type == 2) {
				uni.setNavigationBarTitle({
					title: "每月一考"
				});
			} else if (query.type == 3) {
				uni.setNavigationBarTitle({
					title: "学习任务"
				});
			} else if (query.type == 4) {
				uni.setNavigationBarTitle({
					title: "考试任务"
				});
			}
			this.loadData(1);
		},
		methods: {
			loadData(page) {
				service.queryStudyTask(this.types, page, "10").then(res => {
					if (res.success) {
						this.showNoData = res.result.length == 0;
						// 判断 当当前页数超过1时用追加，否则的话就等于
						if (this.pages > 1) {
							this.practiceList.list = [...this.practiceList.list, ...res.result];
						} else {
							this.practiceList.list = res.result;
						}
						this.pages = res.result.pages;
						this.page = page;
					}
				});
			},
			//开始考试
			//index, item.paperId,item.id,item.taskUserJoinId
			startExam(index, paperId, id, taskUserJoinId) {
				let self = this;
				uni.showModal({
					content: "开始考试后，不能中途退出，到交卷时间强制交卷，请确保手机状态良好",
					success(res) {
						if (res.confirm) {
							self.curIndex = index;
							uni.navigateTo({
								url: '/pages/exam/examsub?examType=' + self.examType +
									'&paperId=' + paperId +
									'&taskId=' + id +
									'&taskUserJoinId=' + taskUserJoinId
							});
						}
					}
				});
			},
			analysis(examId, recordId) {
				if(isEmpty(recordId)){
					uni.showToast({
						title:'recordId为空',
						duration:2000,
						icon:'none'
					});
					return;
				}
				uni.navigateTo({
					url: '/pages/exam/answerAnalysis?examId=' + examId +
						'&recordId=' + recordId +
						'&analyType=1'
				})
			},
			linkTo(index,id, type) {
				this.curIndex = index;
				uni.navigateTo({
					url: "../details/index?id=" + id + "&type=" + type
				});
			}
		},
		onReachBottom() {
			if (this.page == this.pages) {
				this.textShow = true;
				return;
			}
			let pageNo = this.page + 1;
			this.loadData(pageNo);
		},
		onPullDownRefresh() {
			//监听下拉刷新动作的执行方法，每次手动下拉刷新都会执行一次
			this.practiceList.list = [];
			this.loadData(1);
			uni.stopPullDownRefresh();
		}
	};
</script>

<style lang="less">
	page {
		background-color: #f1f1f1;
	}

	.container {}

	.containerin {
		background-color: #fff;
		padding: 20upx 20upx 0;
	}

	.list {
		border-bottom: 1px solid #d8d8d8;
		padding: 20upx;
		overflow: hidden;
		border-radius: 8upx;

		&__img {
			width: 60upx;
			height: 60upx;
			border-radius: 50%;
			float: left;
			margin-right: 20upx;
		}

		&__title {
			float: left;
			font-size: 28upx;
			line-height: 2.1;
		}

		.thisTitle {
			width: 100%;
		}

		&__btn-one {
			float: right;
			width: 140upx;
			height: 50upx;
			border-radius: 6upx;
			color: #fff;
			text-align: center;
			line-height: 50upx;
			font-size: 20upx;
			display: block;
			background-color: #377cfd;
			padding: 0 20upx;
		}

		&__btn-two {
			float: right;
			width: 140upx;
			height: 50upx;
			border-radius: 6upx;
			color: #fff;
			text-align: center;
			line-height: 50upx;
			font-size: 20upx;
			display: block;
			background-color: #ffc0bb;
			padding: 0 20upx;
		}

		&__btn-three {
			float: right;
			// width: 140upx;
			height: 50upx;
			border-radius: 6upx;
			color: #fff;
			text-align: center;
			line-height: 50upx;
			font-size: 20upx;
			display: block;
			background-color: #dedede;
			padding: 0 20upx;
		}

		&__btn-four {
			float: right;
			// width: 140upx;
			height: 50upx;
			border-radius: 6upx;
			color: #fff;
			text-align: center;
			line-height: 50upx;
			font-size: 20upx;
			display: block;
			background-color: #5bc5b7;
			padding: 0 20upx;
		}
	}

	.list:last-child {
		border: 0;
	}

	.ls {
		font-size: 24upx;
		color: #999;
		text-align: center;
		margin-top: 40upx;
	}

	.loading {
		text-align: center;
		font-size: 28upx;
		padding: 20upx 0;
		color: #999;
	}

	.gray-btn {
		color: #FFFFFF;
		background-color: #dedede;
	}
</style>
